<template>
  <view>
    <view class="content">
      <view class="filter-btn">
        <view
          class="filter-btn-item"
          @tap="change(0)"
          :class="{ 'filter-btn-active': btnnum == 0 }"
          >健康登记</view
        >
        <view
          class="filter-btn-item"
          @tap="change(1)"
          :class="{ 'filter-btn-active': btnnum == 1 }"
          >心理评估</view
        >
      </view>
      <view class="record-main" ref="dataList">
        <view
          class="record"
          v-for="(item, index) in recordList"
          :key="index"
          @click="toInfoDetail(item)"
        >
          <!-- <view class="record-item health-status">
            <view class="record-item-name">{{ item.name }}</view>
            <view
              class="record-item-status"
              :class="[item.abnormalSymptoms === 1 ? 'record-item-error' : '']"
              >{{ item.abnormalSymptoms === 0 ? "健康" : "异常" }}</view
            >
          </view>-->
          <view class="record-item border-bt">
            <view class="record-item-title col-1">{{ item.name }}</view>
            <view class="record-item-value col-2">{{ item.cardId }}</view>
          </view>
          <view v-if="btnnum == 1">
            <view class="record-item-title pad-t col-3">ISI得分</view>
            <view class="record-item border-bt">
              <view class="record-item-title col-1">{{
                Object.prototype.toString.call(item.scoreIsi) !== '[object Object]' && item.scoreIsi !=null ? item.scoreIsi : '无'
              }}</view>
              <view
                class="record-item-value"
                :class="[item.resultIsi !== '未评估' ? 'col-4' : 'col-5']"
                >{{ item.resultIsi }}</view
              >
            </view>
            <view class="record-item-title pad-t col-3">PHQ-9得分</view>
            <view class="record-item border-bt">
              <view class="record-item-title col-1">{{
                Object.prototype.toString.call(item.scorePhq9) !== '[object Object]' && item.scorePhq9 !=null  ? item.scorePhq9 : '无'
              }}</view>
              <view
                class="record-item-value"
                :class="[item.resultPhq9 !== '未评估' ? 'col-4' : 'col-5']"
                >{{ item.resultPhq9 }}</view
              >
            </view>
            <view class="record-item-title pad-t col-3">GAD-7得分</view>
            <view class="record-item border-bt">
              <view class="record-item-value col-1">{{
                Object.prototype.toString.call(item.scoreGad7) !== '[object Object]' && item.scoreGad7 !=null  ? item.scoreGad7 : '无'
              }}</view>
              <view
                class="record-item-value"
                :class="[item.resultGad7 !== '未评估' ? 'col-4' : 'col-5']"
                >{{ item.resultGad7 }}</view
              >
            </view>
          </view>
          <view class="record-item">
            <view class="record-item-title">填报时间</view>
            <view class="record-item-value">{{ item.creatime }}</view>
          </view>
        </view>
        <view class="no-more" v-if="finished">已加载全部</view>
      </view>
      <!--<view class="report-bottom" @click="addItem">
        <view class="report-bottom-btn">
          <image
            class="report-bottom-btn-img"
            src="https://szgd-dev.tgovcloud.com/public/images/icon-add.png"
            mode="widthFix"
          ></image>
          添加
        </view>
      </view>-->
    </view>
  </view>
</template>

<script>
import { getJkdjList, getXlpgList } from "@/api";
export default {
  data() {
    return {
      recordList: [],
      btnnum: 0,
      total: 0,
      pageNum: 1,
      size: 10,
      abnormalSymptoms: "0",
      flag: false,
      finished: false,
      cardId: "",
      daSource: "",
      daSourceId: "",
      name: "",
      telPhone: "",
    };
  },
  filters: {
    isiFilter: (value) => {
      const zScoreIsi = value;
      let zResultIsi = "";
      switch (true) {
        case zScoreIsi <= 7:
          zResultIsi = "没有临床上显著的失眠症";
          break;
        case zScoreIsi <= 14 && zScoreIsi >= 8:
          zResultIsi = "可能有阈下失眠症";
          break;
        case zScoreIsi <= 21 && zScoreIsi >= 15:
          zResultIsi = "可能有中度临床失眠症";
          break;
        case zScoreIsi >= 22:
          zResultIsi = "可能有重度临床失眠症";
          break;
      }
      if (value) {
        return zResultIsi;
      } else {
        return "未填写";
      }
    },
    phq9Filter: (value) => {
      const zScorePhq9 = value;
      let zResultPhq9 = "";
      switch (true) {
        case zScorePhq9 <= 4:
          zResultPhq9 = "无抑郁症";
          break;
        case zScorePhq9 <= 9 && zScorePhq9 >= 5:
          zResultPhq9 = "轻度抑郁症";
          break;
        case zScorePhq9 <= 14 && zScorePhq9 >= 10:
          zResultPhq9 = "可能有中度抑郁症";
          break;
        case zScorePhq9 <= 19 && zScorePhq9 >= 15:
          zResultPhq9 = "可能有中重度抑郁症";
          break;
        case zScorePhq9 >= 20:
          zResultPhq9 = "可能有重度抑郁症";
          break;
      }
      if (value) {
        return zResultPhq9;
      } else {
        return "未填写";
      }
    },
    gad7Filter: (value) => {
      const zScoreGad7 = value;
      let zResultGad7 = "";
      switch (true) {
        case zScoreGad7 <= 4:
          zResultGad7 = "无焦虑";
          break;
        case zScoreGad7 <= 9 && zScoreGad7 >= 5:
          zResultGad7 = "轻度焦虑";
          break;
        case zScoreGad7 <= 14 && zScoreGad7 >= 10:
          zResultGad7 = "中度焦虑";
          break;
        case zScoreGad7 >= 15:
          zResultGad7 = "重度焦虑";
          break;
      }
      if (value) {
        return zResultGad7;
      } else {
        return "未填写";
      }
    },
  },
  onLoad(option) {
    if (option.type == "jk") {
      this.btnnum = 0;
      this.abnormalSymptoms = 0;
    } else {
      this.btnnum = 1;
      this.abnormalSymptoms = 1;
    }
    // console.log("onLoad====3333=", option.type, this.btnnum);
    // {"cardId":"4414","cardType":"9","name":"罗杰","telPhone":"18855173610","daSource":"","daSourceId":"","personClassify":"7"}
    let {cardId,name,telPhone} = uni.getStorageSync('dataFromUserBaseInfo')
    this.cardId = cardId;
    this.name = name;
    this.telPhone = telPhone;
    this.getDataList();
  },
  onReachBottom() {
    console.log("onReachBottom====");
    if (this.recordList.length < this.total) {
      this.pageNum++;
      this.getDataList();
    } else {
      this.finished = true;
    }
  },
  // onPageScroll : function(e) {
  //   //nvue暂不支持滚动监听，可用bindingx代替
  //   // console.log("滚动距离为：" + e.scrollTop);
  // },
  methods: {
    change(e) {
      this.recordList = [];
      this.finished = false;
      this.btnnum = e;
      // this.$refs.dataList.scrollTop = 0;
      // if (e === 2) {
      //   this.abnormalSymptoms = "";
      // } else {
      this.abnormalSymptoms = e;
      // }
      this.pageNum = 1;
      this.total = 0;
      this.getDataList();
    },
    addItem() {
      uni.navigateTo({
        url: "../healthReport/add",
      });
    },
    getDataList() {
      console.log("this.pageNum====", this.pageNum);
      const data = {
        pageNum: this.pageNum,
        size: this.size,
        cardId: this.cardId,
        name: this.name,
        telPhone: this.telPhone,
      };
      if (this.abnormalSymptoms == 0) {
        getJkdjList(data).then((res) => {
          console.log("res===", res);
          if (res.records) {
            this.recordList = [...this.recordList, ...res.records];
            this.total = res.total;
            if (this.recordList.length === this.total) {
              this.finished = true;
            }
          }
        });
      } else {
        getXlpgList(data).then((res) => {
          console.log("res===", res);
          if (res) {
            this.recordList = res;
            this.total = res.total;
            if (this.recordList.length === this.total) {
              this.finished = true;
            }
          }
        });
      }
    },
    toInfoDetail(item) {
      uni.navigateTo({
        url:
          "../healthReport/infoDetail?item=" +
          encodeURIComponent(JSON.stringify(item)),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pad-t {
  padding-top: 26rpx;
}
.col-1 {
  color: #000000;
}
.col-2 {
  color: #666666;
}
.col-3 {
  color: #999999;
}
.col-4 {
  color: #2c9af1;
}
.col-5 {
  color: #f15b53;
}

.border-bt {
  border-bottom: 1rpx solid #e5e5e5;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
.filter-btn {
  position: fixed;
  height: 70rpx;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 0 128rpx;
  padding-top: 34rpx;
  justify-content: space-between;
  &-item {
    /*flex-basis: 126rpx;*/
    padding-bottom: 20rpx;
    text-align: center;
  }
  &-active {
    color: #2c9af1;
    border-bottom: 3px solid #2c9af1;
  }
}

.record-main {
  margin-top: 106rpx;
  padding: 0rpx 32rpx;
  box-sizing: border-box;
  background-color: #f2f2f2;
  overflow-y: scroll;
  .record {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 0rpx 32rpx 17rpx;
    border-radius: 10rpx;
    box-shadow: 0px 0px 10px rgba(229, 229, 229, 1);
    margin-top: 30rpx;
    box-sizing: border-box;
    &-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 26rpx 0;
      &-title {
        // color: #999999;
        font-size: 30rpx;
      }
      &-value {
        // color: #666666;
        font-size: 34rpx;
      }
      &-name {
        // color: #000000;
        font-size: 36rpx;
        font-weight: bolder;
      }
      &-status {
        // color: #2c9af1;
        font-size: 30rpx;
        padding: 9rpx 31rpx;
        margin-left: 32rpx;
        // border: 1px solid #2c9af1;
      }
      &-error {
        // color: #f15b53;
        // border: 1px solid #f15b53;
      }
    }
    .health-status {
      justify-content: start;
    }
  }
  .no-more {
    color: #999999;
    font-size: 30rpx;
    margin: 20rpx 0;
    text-align: center;
    height: 80rpx;
    padding-bottom: 60rpx;
  }
}

.report-bottom {
  background-color: #f2f2f2;
  position: fixed;
  height: 94rpx;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30rpx 0 20rpx;
  font-size: 36rpx;
  &-btn {
    margin: 0 auto;
    width: 686rpx;
    height: 94rpx;
    background: #2c9af1;
    border: 1rpx solid #2c9af1;
    border-radius: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    &-img {
      width: 35rpx;
      margin-right: 8rpx;
    }
  }
}</style
>>
